前端對後端進行資料庫異動時，應該要有一個loading的效果出來。
所以今天要來用vuex來實作這麼一個效果。
實作的程式碼如github

首先安裝就不在多說了，直接進入主題。

先在src下建立一個store.ts檔

1. 引用vue
2. 於state注冊一個參數isProgress
3. 於mutations註冊一個methodchangeProgressState

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isProgress: false
  },
  mutations: {
    changeProgressState(state) {
      state.isProgress = !state.isProgress;
    }
  },
  actions: {}
});

放置loading bar於App

修改App.component程式碼

<template>
<div id="app">
// 這邊我放了vue material的loading bar，並用v-if判斷是否呈現
  <md-progress-bar class="md-accent" md-mode="indeterminate" v-if="isProgress()"></md-progress-bar>
    <router-view />
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
// 引用store
import store from "./store";
@Component({})
export default class App extends Vue {
// 用事件取得目前於vuex中的變數狀態
  isProgress() {
    return store.state.isProgress;
  }
}
</script>

修改component中的查詢方式，查看效果

假設我有一個查詢代碼如下

FetchUsers(filters: USER_VW) {
    UserServer.fetch(filters).then((response: Array<USER_VW>) => {
      this.users = response;
    });
  }

修正如下

// 先把store注入
import store from "../../store";

FetchUsers(filters: USER_VW) {
// 透過commit去trigger一開始設定好的事件
    store.commit("changeProgressState");
    UserServer.fetch(filters).then((response: Array<USER_VW>) => {
    // 當資料回傳在trigger一次
      store.commit("changeProgressState");
      this.users = response;
    });
  }

結果如圖

如此就可以用有一個全域的loading效果，之後可以在加上進度的效果出來。